<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init(
      		//getJoke()
      	);
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title"   onclick="getJoke()">点击我 再笑一次</h1>
	</header>
	<div class="mui-content"  >
	   <ul class="mui-table-view">
	           <li class="mui-table-view-cell">
	           		<p>
	           		<span id="imgFirstW"></span>
	           		<img id="imgFirst">
	          		</p>
	           </li><br/><br/>
	          <li class="mui-table-view-cell">
	           		<p id="first">
	           		</p>
	           </li><br/><br/>
	           <li class="mui-table-view-cell">
	         		<p id="second">
	         		</p>
	           </li><br /> <br />
	           <li class="mui-table-view-cell">
	            	<p id="third">
	            	</p>
	               <br/>
	           </li>
	           <li class="mui-table-view-cell">
	           		<p id="four">
	          		</p>
	           </li><br/><br/>
	           <li class="mui-table-view-cell">
	           		<p id="five">
	          		</p>
	           </li><br/><br/>
	            <li class="mui-table-view-cell">
	           		<p>
	           		<img id="imgSecond">
	          		</p>
	           </li><br/><br/>
	           
	       </ul>
	</div>
	
	<script type="text/javascript">	
	var page=1;
	var row=1;
function getJoke() {
	getJokeImage();
 	page++;
	mui.ajax('http://api.avatardata.cn/Joke/NewstJoke?key=e05e38ef960c406b86f92a766ce855eb&page='+page+'&row=5',{
	data: {
			
		
	},
	dataType:'json',//服务器返回json格式数据
	type:'post',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	headers:{'Content-Type':'application/json'},	              
	success:function(data){
		console.log(data.error_code)
		
		if(data.error_code==0){
			var count=1;
			console.log("data:",data);		
			console.log(data.result[count].content);
			document.getElementById("first").innerHTML=data.result[count++].content;
			document.getElementById("second").innerHTML=data.result[count++].content;
			document.getElementById("third").innerHTML=data.result[count++].content;
			document.getElementById("four").innerHTML=data.result[count++].content;
			document.getElementById("five").innerHTML=data.result[count++].content;
			if(count==5)count=1;
		}
	},
	error:function(xhr,type,errorThrown){
		//异常处理；
		console.log(type);
	}
});
		}	
		
	</script>
	<script type="text/javascript">
		var page1 = 1;
		var row1 = 1;

function getJokeImage() {
	if(row1 == 2) {
		page1++;
		row1= 1;
	}
	row1++;
	mui.ajax('http://api.avatardata.cn/Joke/NewstImg?key=e05e38ef960c406b86f92a766ce855eb&page='+page1+'&rows=3', {
		data: {

		},
		dataType: 'json', //服务器返回json格式数据
		type: 'post', //HTTP请求类型
		timeout: 10000, //超时时间设置为10秒；
		headers: {
			'Content-Type': 'application/json'
		},
		success: function(data) {
			console.log(data.error_code)

			if(data.error_code == 0) {
				var count = 1;
				console.log("data:", data);
				document.getElementById("imgFirst").setAttribute("src", data.result[count++].url);
				//document.getElementById("imgFirstW").innerHTML = data.result[count].content;
				document.getElementById("imgSecond").setAttribute("src", data.result[count++].url);
				if(count == 3) count = 1;
			}
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			console.log(type);
		}
	});
}</script>
	
	
</body>
</html>